<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fsfsfs</title>
</head>
<style>
a {
    display: inline-block;
    width: 100px;
    line-height: 40px;
    margin: 40px;
    text-align: center;
    border-radius: 4px;
    background: rgba(12,96,235,.8);
    color: #fff;
    text-decoration: none;
}

#ds {
    perspective-origin: 50% 50%;
    perspective: 800px;
    overflow: hidden;
}

#page {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    transform-style: preserve-3d;
    /*position: relative;*/
}

#page>div {
    width: 300px;
    text-align: center;
    line-height: 300px;
    margin-left: 50px;
    font-size: 200px;
    background: #1296db;
    position: absolute;
}

#item1 {
    transform-origin: bottom;
    transition: .6s linear;
}

#item2,
#item3,
#item4,
#item5,
#item6 {
    transform-origin: bottom;
    transition: .6s linear;
    transform: rotateX(45deg)
}

html body {
    height: 100%;
}
</style>

<body>
    <div id="ds">
        <div id="page" style="-moz-user-select: none;">
            <div id="item1" style="z-index: 6;user-select: none;">1</div>
            <div id="item2" style="z-index: 5;user-select: none;">2</div>
            <div id="item3" style="z-index: 4;user-select: none;">3</div>
            <div id="item4" style="z-index: 3;user-select: none;">4</div>
            <div id="item5" style="z-index: 2;user-select: none;">5</div>
            <div id="item6" style="z-index: 1;user-select: none;">6</div>
        </div>
    </div>
    <div style="text-align: center;-moz-user-select:none"><a href="javascript:prev()" id="nt">prev</a> <a href="javascript:next()" id="pr">next</a></div>
    <div style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;width:300px;height: 300px;line-height: 300px;text-align: center;z-index: 99;margin: auto;background-color: rgba(20,20,20,0.7);display: none;-moz-user-select: none;color:#fff" id="md" onclick='this.style.display="none"'>木得了</div>
</body>
<script>
var ind = 1;

function prev() {
    if (ind == 1) {
        document.getElementById('md').style.display = 'block'
        return
    };
    ind--;
    var ii = ind;
    var cur = document.getElementById('item' + ii);
    cur.style.transform = 'rotateX(90deg)';
    cur.style.zIndex = 7 - ind;
    if (ind == 0) { return };
    document.getElementById('item' + ind).style.transform = 'rotateX(0)';
}

function next() {
    if (ind == 7) {
        document.getElementById('md').style.display = 'block'
        return;
    }
    var ii = ind;
    ind++;
    var cur = document.getElementById('item' + ii);
    cur.style.transform = 'rotateX(-90deg)';
    cur.style.zIndex = 6;
    if (ind == 7) {
        return;
    }
    document.getElementById('item' + ind).style.transform = 'rotateX(0)';

}
</script>

</html>